<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- <h4>js 特效</h4>
		<p>点击图片切换,if-else循环单击</p>
		<img src="img/a.png" style="cursor: pointer;" id="aaa" />
		<script type="text/javascript">
			imgaaa = document.getElementById('aaa');

			i = 0;
			imgaaa.onclick = function() {
				if (i % 2 == 0) {
					this.src = 'img/b.png';
					this.style.background = 'orange';
					this.style.borderRadius = "50px"
				} else {
					this.src = 'img/a.png';
				}
				i++
			}
		</script>
		<hr />


		<h4>鼠标事件</h4>
		<p>onclick--------------点击</p>
		<hr />

		<p>ondblclick-----------双击</p>
		<hr />

		<p>onmouseenter-------鼠标移入</p>
		<hr />

		<p>onmouseleave-------鼠标移出</p>
		<hr />

		<p>onmousemove-------鼠标移动</p>
		<p>event----坐标</p>
		<p>document.title=------修改页面title</p>

		<div id="bbb" style="position: absolute;top: 0px;left：0px">★</div>

		<script type="text/javascript">
			window.onload = function() {
				bbb = document.getElementById('bbb');

				document.onmousemove = function(event) {
					x = event.clientX;
					y = event.clientY;
					document.title = x + '-' + y;

					bbb.style.top = 10 + y + 'px';
					bbb.style.left = 10 + x + 'px'

				}
			}
		</script> -->





		<div id="floatLayer" style="position:absolute;width:200px;height:200px;background:black;"></div>
		<script type="text/javascript">
			function Drag(id) {
				var obj = document.getElementById(id);
				//设置初始值
				var flag = 0;
				var minus_x = 0;
				var minus_y = 0;
				obj.onmousedown = function(e) {
					var evt = e || window.event;
					if (document.setCapture) this.setCapture();
					if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
					flag = 1;
					this.style.cursor = 'move';
					minus_x = evt.clientX - obj.offsetLeft;
					minus_y = evt.clientY - obj.offsetTop;
				}

				document.onmousemove = function(e) {
					var evt = e || window.event;
					if (flag) {
						obj.style.left = parseInt(evt.clientX - minus_x) + 'px';
						obj.style.top = parseInt(evt.clientY - minus_y) + 'px';
					} else {
						return null;
					}


				}
				obj.onmouseup = function() {
					if (document.releaseCapture) this.releaseCapture();
					if (window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
					flag = 0;
				}
			}

			Drag('floatLayer');
		</script>

	</body>
</html>
